<template>
	<el-card shadow="hover" class="item-background">
		<template v-slot:header>
			快捷菜单
			<div style="float: right;display: inline-flex">
				<sc-icon style="cursor: pointer;width: 18px;" @click="setShortMenu" title="设置"><el-icon-setting/></sc-icon>
			</div>
		</template>
		<el-row :gutter="0" class="box" style="height: 210px;overflow: auto;">
			<el-col :span="4" v-for="item in menuList" :key="item.id" @click="openMenu(item)">
				<div class="icon-box">
					<el-icon><component :is="item.meta.icon" /></el-icon>
					<div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.meta.title}}</div>
				</div>
			</el-col>
		</el-row>
	</el-card>
	<short-menu-setting v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></short-menu-setting>
</template>

<script>
import ShortMenuSetting from "@/views/home/widgets/components/shortMenuSetting";
export default {
	components: {ShortMenuSetting},
	data() {
		return {
			dialog:{
				save:false
			},
			menuList:[],
		}
	},
	mounted() {
		this.getMyShortcutMenu();
	},
	methods: {
		openMenu(item){
			this.$router.push(item.path)
		},
		setShortMenu()
		{
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open().setData(this.menuList)
			})
		},
		//本地更新数据
		handleSaveSuccess() {
			this.getMyShortcutMenu();
		},
		async getMyShortcutMenu()
		{
			var res = await this.$API.system.shortMenu.getMyShortcutMenu.get();
			if (res.code == 200) {
				this.menuList = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		}
	}
}
</script>
<style scoped>
.item-background {background: linear-gradient(to right, #ed2a2a, rgb(64 158 255));color: #fff;}
.icon-box {height:70px;text-align: center;cursor: pointer;}
.icon-box i {font-size: 26px;transition: color .15s linear;}
.icon-box:hover i, .icon-box:hover p {color: #5cb6ff;}
.icon-box p {color: #FFFFFF;margin-top: 15px;transition: color .15s linear;}
</style>
